<template>
    <div>
        {{stu}}, {{salary}}
        <button @click="doSome"> do</button>

    </div>
</template>
<script>
import { ref, reactive, watch } from 'vue'
export default {
    setup () {

        const salary = ref(10000)
        const stu  = reactive({
            address: {
                a:1,
                b:2,
                city: 'wuhan'
            }
        })

        const doSome = () => {
            // salary.value += 1

            // stu.address = {city: '北京'}
            // stu.address.a =  200
            stu.address.city =  '北京'
        }

        // 1. watch 监听单个数据
        // watch(salary, (newVal, oldVal)=>{ 
        //     console.log('newVal:', newVal, 'oldVal:',oldVal )
        // })

        // 1. watch 监听单个数据
        // watch(stu, (newVal, oldVal)=>{ 
        //     console.log('stu, newVal:', newVal, 'oldVal:',oldVal )
        // })

        // 2. watch 监听 stu, salary 数据
        // watch([stu, salary], (newVal, oldVal)=>{ 
        //     console.log('[监听多个数据的变化], newVal:', newVal, 'oldVal:',oldVal )
        // })

        // 3. 监听响应数据的一部分
        // watch(()=>stu.address.city, (newVal, oldVal)=>{ 
        //     console.log('stu.address.city, newVal:', newVal, 'oldVal:',oldVal )
        // })

        // 4. 深度监听，立即执行
        watch(()=>stu.address , (newVal, oldVal) => {
            console.log('第一个参数是函数', newVal, oldVal)
        }, { deep: false,  immediate: false} )


        return { salary, stu, doSome}
    }
}
</script>